<template>
  <div id="ranking-box" @wheel.stop="handleScroll">
    <div class="ranking-item animate__animated animate__bounceInRight animate__fast"
         :class="{'active-item' : activeIndex === index}"
         @mouseenter="changeActiveIndex(index)"
         @mouseleave="changeActiveIndex(0)"
         @click="toEpPage(item.mangaId)"
         v-for="(item, index) in listData" :key="index">
      <div class="img-box">
        <img-lazy :src="item.thumbCoverUrl ? item.thumbCoverUrl : item.coverUrl"/>
      </div>
      <div class="info-box">
        <div class="ranking-number" :class="{'active-number' : activeIndex === index && index <= 2}">
          <i>{{ index + 1 }}</i>
        </div>
        <div class="text-box">
          <div class="text">
            <div class="name text-ellipsis">{{ item.name }}</div>
            <div class="cnTeam text-ellipsis">{{ item.cnTeam }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'rankingItems',
  props: ['listData'],
  data() {
    return {
      activeIndex: 0
    }
  },
  methods: {
    changeActiveIndex(index) {
      this.activeIndex = index
    },
    handleScroll(event) {
      // 阻止默认滚动行为
      event.preventDefault();
      // 水平滚动距离
      var wheelDelta = event.deltaY || event.detail || event.wheelDelta;
      var delta = parseInt(wheelDelta);
      document.querySelector('#ranking-box').scrollLeft += delta;
    },
    toEpPage(id) {
      this.$router.push("/mgEp?id=" + id)
    }
  }
}
</script>

<style scoped lang="scss">
#ranking-box {
  width: 100%;
  display: flex;
  align-items: flex-end;
  overflow-x: auto;
  overflow-y: scroll;
  height: 320px;
  z-index: 2;
  padding-bottom: 10px;

  &::-webkit-scrollbar {
    display: none;
  }

  .img-box {
    width: 100%;
    height: 85%;

    & img {
      width: 100%;
      height: 100%;
      object-fit: fill;
    }
  }

  .info-box {
    display: flex;
    justify-content: flex-end;
    position: relative;
    width: 100%;
    height: 15%;
    background-color: #FFFFFF;

    .ranking-number {
      position: absolute;
      bottom: 0;
      left: 5px;
      font-size: 35px;
      font-family: 'consolas', sans-serif !important;
      color: var(--theme-color);
      transition: all 0.3s ease;
      text-shadow: -1px 0 #000, /* 右侧边线 */
      0 1px #000, /* 下侧边线 */
      1px 0 #000, /* 左侧边线 */
      0 -1px #000; /* 上侧边线 */
    }

    .text-box {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;

      .text {
        height: 100%;
        width: 60%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding-right: 5px;
        font-weight: bold;

        .name {
          width: 100%;
          font-size: 17px;
          text-align: right;
          transition: all 0.3s ease;
        }

        .cnTeam {
          width: 100%;
          font-size: 10px;
          text-align: right;
        }
      }
    }
  }

  .ranking-item {
    cursor: pointer;
    flex-shrink: 0;
    width: 190px;
    height: 90%;
    border: 1px solid var(--theme-color);
    margin-right: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }

  .active-item {
    width: 210px;
    height: 97%;

    .info-box {
      .text-box {
        .name {
          font-size: 21px !important;
        }
      }
    }

  }

  .active-number {
    bottom: -20px !important;
    font: 120px 'consolas' !important;
  }

  .ranking-item:nth-of-type(1) {
    position: relative;
    border: 2px solid #FFD700;

    .ranking-number {
      bottom: -14px;
      font: 90px 'consolas';
      color: #FFD700;
      text-shadow: -1px 0 #000, /* 右侧边线 */
      0 2px #000, /* 下侧边线 */
      2px 0 #000, /* 左侧边线 */
      0 -1px #000; /* 上侧边线 */
    }

    .text-box {
      background-color: #f5f5f5;
      background: linear-gradient(to right, #fffc00, #ffd500);
      background: -webkit-linear-gradient(to right, #fffc00, #ffdd00);

      .name {
        font-size: 21px;
      }
    }

    &::before {
      position: absolute;
      width: 70px;
      height: 70px;
      top: -17px;
      right: -18px;
      z-index: 1;
      background-image: url("@/assets/icon/crown.svg");
      background-size: cover;
      content: "";
    }
  }

  .ranking-item:nth-of-type(2) {
    border: 2px solid #cdd4db;

    .ranking-number {
      bottom: -14px;
      left: 5px;
      color: #E3E6EC;
      font: 90px 'consolas';
      text-shadow: -1px 0 #000, /* 右侧边线 */
      0 2px #000, /* 下侧边线 */
      2px 0 #000, /* 左侧边线 */
      0 -1px #000; /* 上侧边线 */
    }

    .text-box {
      background-color: #f5f5f5;
      background: linear-gradient(to right, #f5f5f5, #cdd4db);
      background: -webkit-linear-gradient(to right, #f5f5f5, #cdd4db);

      .name {
        font-size: 19px;
      }
    }
  }

  .ranking-item:nth-of-type(3) {
    border: 2px solid #B87333;

    .ranking-number {
      bottom: -14px;
      left: 5px;
      color: #CD7F32;
      font: 90px 'consolas';
      text-shadow: -1px 0 #000, /* 右侧边线 */
      0 2px #000, /* 下侧边线 */
      2px 0 #000, /* 左侧边线 */
      0 -1px #000; /* 上侧边线 */
    }

    .text-box {
      background-color: #f5f5f5;
      background: linear-gradient(to right, #fbb162, #B87333);
      background: -webkit-linear-gradient(to right, #fbb162, #B87333);

      .name {
        font-size: 18px;
      }
    }
  }
}
</style>